<template>
  <div>
    <el-container>
      <el-header>
        <div class="header">
          <div :class="this.isCollapse?'header_logo':'header_logo_active'">
            <img src="../assets/logo.png" width="40px">
          </div>
          <div :class="this.isCollapse?'header_nav':'header_nav_active'">
            <div class="header_shrink">
              <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                <el-radio-button v-show="this.isCollapse" :label="false">
                  <img src="../assets/icon_header/zhankai.png" width="30px">
                </el-radio-button>
                <el-radio-button v-show="!this.isCollapse" :label="true">
                  <img src="../assets/icon_header/danchu.png" width="35px">
                </el-radio-button>
              </el-radio-group>
            </div>
            <div class="header_user">
              <el-menu 
              background-color="#334157" 
              text-color="#fff" 
              mode="horizontal" 
              default-active="0">
                <el-submenu index="1">
                  <template slot="title">超级管理员</template>
                  <el-menu-item>设置</el-menu-item>
                  <el-menu-item>个人中心</el-menu-item>
                  <el-menu-item>退出</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="this.isCollapse?'16%':'6%'">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            background-color="#334157"
            text-color="#fff"
            style="width:100%"
            @select="handleSelect"
            :collapse="!this.isCollapse"
            active-text-color="#FFD04B">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>基础管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/goods">商品管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/order">交易订单</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>系统管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/user">用户管理</el-menu-item>
                <el-menu-item index="/home/menu">菜单管理</el-menu-item>
                <el-menu-item index="/home/users">角色管理</el-menu-item>
                <el-menu-item index="/home/company">公司管理</el-menu-item>
                <el-menu-item index="/home/round">系统变量管理</el-menu-item>
                <el-menu-item index="/home/top">权限管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>支付管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/home/pay">支付配置信息</el-menu-item>
                <el-menu-item index="/home/pays">支付配置</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <router-view />
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: true,
      activeIndex: '/home/goods'
    }
  },
  methods: {
    handleSelect(path) {
      this.$router.push(path);
    }
  }
}
</script>

<style>
.header {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_logo {
  width: 15%;
  height: 100%;
  text-align: center;
  border-right: 2px solid #000;
}
.header_logo_active {
  width: 4.8%;
  height: 100%;
  border-right: 2px solid #000;
}
.header_shrink img {
  margin-top: 15px;
}
.header_logo img {
  margin-top: 5px;
}
.header_nav {
  width: 84%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_nav_active {
  width: 95.2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-radio-button span {
  background: none !important;
  border: none !important;
}
  .el-header, .el-footer {
    background-color: #334157;
    height: 10vh;
    color: #eee;
  }
  
  .el-aside {
    background-color: #334157;
    color: #eee;
    height: 90vh;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>